If you cannot see this page properly,click here.
如您未能完整地閱讀此頁，請 按此。
 
[FIRSTNAME]您好！Systematic 誠意推介！
CSS3 Flexible Box (Flexbox) 響應式佈局 (Responsive Layout) 課程
及
Sass, Less 與 Compass CSS 精簡結構課程 (CSS Preprocessors)！
     
 
CSS3 Flexible Box (Flexbox)
響應式佈局 (Responsive Layout) 課程
日期 (dd/mm) 星期 時間 課時  
22/07 六 2:30pm - 9:30pm
(Dinner: 5:30pm - 6:30pm)		 6 小時
 

CSS3 Flexible Box，簡稱 Flexbox，是 W3C (World Wide Web Consortium) Candidate Recommendation。Flexbox 是被視為響應式佈局的新一代概念。Flexbox 能令我們以更簡單的方式實踐響應式佈局的效果。配合 Flexbox，我們能夠實踐：

  • Grid System (responsive)
  • Holy Grail (responsive)
  • Input Add-ons / Input group (responsive)
  • 水平及垂直地置中 (responsive)
  • Responsive Menu
  • 更多，請參考課程內容。

《CSS3 Flexible Box (Flexbox) 響應式佈局 (Responsive Layout) 課程》是一個 6 小時的課程。在課程的初段導師會扼要地為大家溫習及學習 Flexbox 的必要背景 CSS 概念，然後會逐一教授各種 Flexbox 技術。學習過各種 Flexbox 技術後，最後導師會教授同學使用 Flexbox 實踐多種常用的網頁元件，如 responsive grid、responsive holy grail、card layout、responsive menu、responsive image (相簿)、responsive iframe 等技術，令同學可以從多角度了解如何將 Flexbox 技術實踐出來。本課程旨在令大家有效地學習 Flexbox，令大家在處理網頁佈局時多了一把利刀！
 
CSS3 Flexible Box 響應式佈局課程內容
 

第一部份：必要的背景 CSS 概念
在課程的初段導師會扼要地為大家溫習及學習 Flexbox 的必要背景 CSS 概念。

  • Selectors
  • Margin
  • Border
  • Padding
  • Content
  • Viewport (vw, vh 等概念)

第二部份：各種 Flexbox 技術
在這部份導師會透過一系列的實習教授各種 Flexbox 技術。

  • 基本術語
    • main axis
    • main start
    • main end
    • cross axis
    • cross start
    • cross end
    • flex container
    • flex item
  • flex container
    • display
    • flex-direction
    • flex-wrap
    • flex-flow
    • justify-content
    • align-content
    • align-items
  • flex item
    • flex
    • flex-grow
    • flex-shrink
    • flex-basis
    • align-self
    • order

第三部份：實際使用 Flexbox 的例子
在這部份導師會教授同學使用 Flexbox 實踐多種常用的網頁元件，如 responsive grid、responsive holy grail、card layout、responsive menu、responsive image (相簿)、responsive iframe 等。
 
 
 
Sass, Less 與 Compass CSS 精簡結構課程
(CSS Preprocessors)
日期 (dd/mm) 星期 時間 課時  
05/08 六 2:30pm - 9:30pm
(Dinner: 5:30pm-6:30pm)		 6 小時
 

CSS Preprocessors 是一系列的技術能讓我們以 dry (don't repeat yourself) 原則編寫及管理 CSS。由於我們不能直接地未編譯下使用 CSS Preprocessors，要享受 CSS Preprocessors 所帶來的便利就需要有系統地由安裝、編譯、語法、將語法應用到實際例子的流程學習它。《Sass, Less 與 Compass CSS 精簡結構課程》 是一個 6 小時的課程，課程內會教授現有常用的 CSS Preprocessors (Sass, Less 和 Compass)，當中覆蓋它們的安裝、編譯、語法到應用語法等。這課程令你不用到四處摸索就能學會 CSS Preprocessors。請 按此 參閱課程內容。
 
Sass, Less 與 Compass CSS 精簡結構課程內容
 

第一部份：Sass
Sass (Syntactically Awesome Stylesheets) 是一個相當流行的 CSS Preprocessor。

  • 安裝 Ruby
  • 安裝 Sass
  • Sass 命令行界面
  • 將 Sass 結合到 IDE (Integrated Development Environment, 集成開發環境)
  • 註釋
  • 變數
  • 巢狀 CSS
  • Partials 與 Imports
  • Inheritance 與 Extends
  • Mixin 與 Include
  • 引用 parent class
  • 在 CSS 內進行加減乘除等運算
  • Media query
  • 顏色處理
  • 預設值
  • Interpolation
  • 流程管理
    • if / else
    • for loop
    • each
    • while
  • Functions
    • Custom functions
    • Common numeric functions
    • Common color functions
  • 12-column grid system
  • Output styles


第二部份：Less
跟 Sass 相似，Less 是另一個同樣是相當流行的 CSS Preprocessor。

  • 安裝 Less
  • Less 命令行界面
  • 將 Less 結合到 IDE (Integrated Development Environment, 集成開發環境)
  • 註釋
  • 變數
  • Interpolation
  • 巢狀 CSS
  • Imports
  • Mixin
  • Mixin guards
  • Mixin arguments
  • 引用 parent class
  • Merging
  • 在 CSS 內進行加減乘除等運算
  • List 與 Loop
  • Functions
    • Custom functions
    • Common numeric functions
    • Common color functions
  • 12-column grid system


第三部份：Compass
Compass 是以 Sass 為基礎的 CSS authoring Framework.

  • 安裝 Compass
  • 設定環境變數 (environmental variables)
  • 使用指令建立 Compass 專案
  • 了解 config.rb
  • 在 Compass 內使用 reset
  • 在 Compass 內使用 CSS3
  • 在 Compass 內設定 Typography
  • 製作 sprite sheet
  • 不能 compile 時可以如何處理
 

旺角 電話及地址：2332-6544
九龍旺角亞皆老街 109 號，皆旺商業大廈 18 樓 【自置物業】
(港鐵旺角站 D2 出口，2 分鐘到大堂)

觀塘 電話及地址：3563-8425
九龍觀塘成業街 7 號，寧晉中心 12 樓 G2 室 【自置物業】
(港鐵觀塘站 B1 出口，2 分鐘到大堂)

北角 電話及地址：3580-1893
香港北角馬寶道 41-47 號，華寶商業大廈 3 樓 01-02 號舖 【自置物業】
(港鐵北角站 A2 出口，1 分鐘到大堂)

沙田 電話及地址：2151-9360
新界沙田石門安群街 3 號，京瑞廣場 1 期 10 樓 M 室 【自置物業】
 (馬鐵石門站 C 出口，步行 1 分鐘到大堂)

屯門 電話及地址：3523-1560
屯門屯喜路 2 號，柏麗廣場 17 樓 1708 室 【自置物業】
(輕鐵市中心站，步行 4 分鐘到大堂；西鐵屯門站 B 出口，可免費轉乘輕鐵)

Website: http://www.systematic.com.hk

This e-mail is confidential. It may also be legally privileged. If you are not the addressee you may not copy, forward, disclose or use any part of it. If you have received this message in error, please delete it and all copies from your system and notify the sender immediately by using "contact us" in website.
Internet communications cannot be guaranteed to be timely, secure, error or virus-free. The sender does not accept liability for any errors or omissions.

Please do not reply to this email address. 請勿回覆此電郵